<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>4.JSX</title>
    </head>
    <body>
        <div id="root"></div>

        <script src="./lib/react.development.js"></script>
        <script src="./lib/react-dom.development.js"></script>
        <script src="./lib/babel.js"></script>

        <script type="text/babel">
            /*
            JS数据类型:
                基本数据类型:string' number boolean null symbol bigint
                引用数据类型:object array function

            JSX中基本数据类型只能渲染 string number
            JSX中引用数据类型只能渲染 array ,但要求数组中只能包含string number 和React元素 数据
              渲染数组数据会自动展开数据的所有数据进行渲染
            */
            const a = "hello";
            const b = 123;
            const c = true;
            const d = null;
            const e = undefined;
            const f = Symbol();
            const g = 456n;
            const h = { name: "华哥", age: 38 };
             // const i = [
             //   { name: "华哥", age: 38 },
             //   { name: "张飞", age: 20 },
             // ];
             const o = <div>其他的元素</div>;
             const i = ["react~~", 111, "react~~", 111, "react~~", 111, o];
             const l = function () {
               console.log(111);
             };

             // 创建React元素

            
             const element = (
        <div>
          <p>string : {a}</p>
          <p>number : {b}</p>
          <p>boolean : {c}</p>
          <p>null : {d}</p>
          <p>undefined : {e}</p>
          <p>symbol : {f}</p>
          <p>bigint : {g}</p>
          <p>object : {i}</p>
          {o}
        </div>
      );

        </script>
    </body>
</html>